<template>
	<div class="about">


		<div class="site_banner">
			<div class="site">
				<a href=""><span>团队优势</span></a>|
				<a href=""><span>在线预约</span></a>|
				<a href=""><span>成功案例</span></a>
				</div>
			<img src="../assets/images/business_banner.jpg">
			<div class="site_wrap">
				<img src="../assets/images/shopping_ic01.png" alt="">
				商务会展
				<img src="../assets/images/shopping_ic02.png" alt="">
				</div>
		</div>


		<div class="business_part">

			<div class="bus_list">
				<ul class="fixed">

					<li>
						<h2 class="fnt_36">商务会展</h2>
						<p> 古北水镇有一支专业商务服务团队，拥有丰富的商务会议接待经验，我们紧扣客户需求，量身策划，精准定位，确保活动的尽善尽美。自开业以来，已为众多国内外政府部门、大中型企事业集团及公司部门成功策划实施了各类年会、研讨会、市场发布会、新闻发布会和庆典、路演、拓展训练、竞技赛事和奖励旅游等活动，得到了客户的一致好评，并建立了良好的长期合作关系。
						</p>
					</li>

					<li>
						<h2 class="fnt_36">服务宗旨</h2>
						<p> 维护客户的利益，坚持诚信服务的原则；以专业的团队和个性化的服务，全程跟进、无缝对接；为您赢得广大客户的信任和支持；追求客户满意是我们最大的责任。期望在您企业发展的乐谱中留下完美的音符，为您，我们会做得更好...
						</p>
					</li>
				</ul>
			</div>
		</div>
		<div class="box">我们的优势</div>
		<div class="box1">
			<ul class="oxx1" >
				
				<li  v-for="item in list" :key="item+'a'">
					<div class="oxx2"><img :src="item.img" alt=""></div>
					<p>{{item.biao}}</p>
					<div class="oxx3">{{item.nei}}</div>
				</li>
			</ul>
		</div>


		<div class="box">成功案例</div>

		<div class="box3">
			<div class="oxx4">
				<img src="../assets/images/file_ce5904e8c3f448968789e67bd1ae8a6d.jpg" alt="">
				<div class="oxx5">"兴乐营",古北水镇活动</div>
				</div>
			<div class="oxx4">
				<img src="../assets/images/file_9568c5c19b63493ab8c47f173baef99c.jpg" alt="">
				<div class="oxx5">CHRISTOPHER RAXXY 创世5D羽绒服发布会 中国首秀</div>
				</div>
			<div class="oxx4">
				<img src="../assets/images/file_49abb28510d84aabb2b11794b9d1064c.jpg" alt="">
				<div class="oxx5">无公益 不长江 第六届长江公益颁奖典礼暨公益论坛</div>
				</div>
			<div class="oxx4">
				<img src="../assets/images/file_604a32dde8964d18a5414223b1757545.jpg" alt="">
				<div class="oxx5">观长城之妙  探建筑之美  谷歌艺术与文化节</div>
				</div>

		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					img: require("../assets/images/al1.png"),
					biao: "环境一流",
					nei: "水镇景区位于中国首都北京，北纬40.3”，东经116.8”，有着北京后花园的美称，周边青山碧水环绕，是一处天然氧吧。"
				},
				{
					img: require("../assets/images/al2.png"),
					biao: "交通便捷",
					nei: "位于北京市与承德市之间，京承高速直达，高铁站、机场距离景区1.5-2小时车程。"
				},
				{
					img: require("../assets/images/al3.png"),
					biao: "设施完善",
					nei: "景区拥有2家综合酒店、10家主题酒店、10家精品酒店和23家特色民宿，多家风格各异的主题餐厅，大小会议室60多个，并可提供特色户外大型会议和晚宴场所。"
				},
				{
					img: require("../assets/images/al4.png"),
					biao: "调配高效",
					nei: "古北水镇景区内全部资源均由公司集中经营，统一管理调配，为您提供目的地一站式服务体验。"
				},
				{
					img: require("../assets/images/al5.png"),
					biao: "管理规范",
					nei: "所有服务项目提供清单明细，帮助客户控制成本，物超所值。"
				},
				{
					img: require("../assets/images/al6.png"),
					biao: "服务精准",
					nei: "经验丰富的专业团队提供一站式服务，全程跟进，敬业乐群，随时随地为客户提供方便。"
				}],
			}
		}
	}
</script>

<style scoped="scoped">
	*{margin: 0;padding: 0;}
	*{
	    margin: 0;
	    padding: 0;
	}
	a{
	    text-decoration: none;
		
	}
	ul,
	ol{
	    list-style: none;
	}
	.about{
		background:url(../assets/images/hotel_bg.jpg);
	}
	.site_banner{
		width: 100%;
		position: relative;
		margin: 0;
	}
	.site_banner .site>a{
		color: #fff;
		margin: 0 15px;
	}
	.site{
		width: 100%;
		position: absolute;
		font-size: 26px;
		color: #fff;
		
	}
	.site_wrap {
	    position: absolute;
	    left: 161px;
	    bottom: 110px;
		z-index:33;
		font-size: 42px;
		color: aliceblue;
	}
	.business_part{
		width: 100%;
		background-color: #fff;
	}
	.bus_list .fixed{
	    background: #fff;
	    padding: 70px 0;
		width: 1280px;
		margin: auto;
		overflow: hidden;
	}
	.fixed li:nth-last-child(1){
		width: 44%;
		float:right;
		
	}
	.bus_list>.fixed li:nth-last-child(2){
		width: 44%;
		float: left;
		border-right: 1px salmon solid;
		padding-right:90px ;
		
	}
	.fixed li>p{
		width: 100%;
		margin: auto;
	}
	.box{
		width: 1280px;
	margin: auto;
	font-size: 36px;
	font-weight: 500;
	padding-top: 20px;
	height: 60px;
	line-height: 60px;
	}
	.box1{
		width: 1280px;
		/* background-color: #42B983; */
		padding-top: 60px;
		margin: auto;
		height: 295px;
	}
	.box1>.oxx1{
		overflow: hidden;
	}
	.box1>.oxx1>li{
		width:16.667% ;
		height: 274px;
		/* background-color: #FA8072; */
	}
	.box1>.oxx1>li{
		float: left;
	}
	.box1>.oxx1>li>.oxx2{
		width: 60px;
		height: 60px;
		border-radius: 30px;
		background-color: blueviolet;
		margin: auto;
		line-height: 60px;
		position: relative;
	}
	.box1>.oxx1>li>.oxx2>img{
		width: 30px;
		height: 30px;
		line-height: 60px;
		margin: auto;
		position: absolute;
		top: 15px;
		right: 15px;
	}
	.box1>.oxx1>li>.oxx3{
		width: 141px;
		margin: auto;
		
	}
	.box3{
		width: 1280px;
		height: 150.44px;
		margin: auto;
		padding: 80px 0;
		
	}
	.box3 .oxx4{
		width: 288.75px;
		height: 150.75px;
		float: left;
		margin-right: 41px;
		transition: all 1s;
		 position: relative;
		 overflow: hidden;
	}
	.box3 .oxx4:last-child{
		margin-right: 0;
	}
	.box3 .oxx4>img{
		width: 100%;
		
	}
	.box3 .oxx4:hover{
		transform : scale(1.25) ;
		animation-delay:1s;
	}
	
	.box3 .oxx4 .oxx5{
		width: 288.75px;
		height: 50px;
		line-height: 50px;
		position: absolute;
		margin: auto;
		color: #fff;
		background-color: rgba(0,0,0,0.7);
		transition:all 1s;
		animation-delay:1s;
	}
	.box3 .oxx4:hover .oxx5{
		bottom: 0;
		 animation-duration :1s;
		animation-timing-function :linear;
	}
</style>
